<template>
  <div class="right-panel">
    <h3 class="panel-title">属性配置</h3>
    <div class="panel-content">
      <template v-if="selectedComponent">
        <FormProvider :form="form">
          <a-tabs>
            <a-tab-pane key="style" tab="样式设置">
              <SchemaField :schema="styleSchema" />
            </a-tab-pane>
            <a-tab-pane key="props" tab="数据配置">
              <SchemaField :schema="propsSchema" />
            </a-tab-pane>
            <a-tab-pane key="events" tab="事件配置">
              <SchemaField :schema="eventsSchema" />
            </a-tab-pane>
          </a-tabs>
        </FormProvider>
      </template>
      <div v-else class="empty-tip">
        请选择一个组件进行配置
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue';
import { createForm } from '@formily/core';
import { FormProvider, createSchemaField } from '@formily/vue';
import { useEditorStore } from '@/stores/editor';
import {
  Input,
  Select,
  InputNumber,
  Switch,
  Radio,
  FormItem,
  Space
} from '@formily/antdv-x3';
import { Chrome } from 'vue-color';

const { SchemaField } = createSchemaField({
  components: {
    FormItem,
    Input,
    Select,
    InputNumber,
    Switch,
    Radio,
    Space
  }
});

const editorStore = useEditorStore();
const form = ref(createForm());
const showColorPicker = ref(false);

// 当前选中的组件
const selectedComponent = computed(() => editorStore.selectedComponent);

// 获取原始组件配置
const originalComponent = computed(() => {
  if (!selectedComponent.value) return null;
  return editorStore.baseComponents.find(
    c => c.field === selectedComponent.value?.configData?.field
  );
});

// 处理颜色变化
const handleColorChange = (color: any, onChange: (value: string) => void) => {
  onChange(color.hex);
};

// 生成配置 Schema
const styleSchema = computed(() => {
  if (!selectedComponent.value || !originalComponent.value) return {};
  
  const styleProps = originalComponent.value.config['x-component-props']?.styleConfig || {};
  console.log('styleProps', styleProps);
  
  // 处理颜色选择器
  Object.keys(styleProps).forEach(key => {
    if (styleProps[key]['x-component'] === 'ColorPicker') {
      styleProps[key]['x-component'] = 'template';
      styleProps[key]['x-content'] = 'color' as any;
    }
  });
  return {
    type: 'object',
    properties: styleProps
  };
});

const propsSchema = computed(() => {
  if (!selectedComponent.value || !originalComponent.value) return {};

  const componentProps = originalComponent.value.config['x-component-props']?.propsConfig || {};

  return {
    type: 'object',
    properties: componentProps
  };
});

const eventsSchema = computed(() => {
  if (!selectedComponent.value || !originalComponent.value) return {};

  const eventProps = originalComponent.value.config['x-component-props']?.events || {};

  return {
    type: 'object',
    properties: eventProps
  };
});

// 监听选中组件变化，更新表单值
watch(() => editorStore.selectedComponent, (newComponent) => {
  if (newComponent) {
    form.value.setValues(newComponent.configData.config);
  }
});

// 监听表单值变化，更新组件
watch(() => form.value.values, (newValues) => {
  if (editorStore.selectedComponent) {
    editorStore.updateComponent(editorStore.selectedComponent.id, newValues);
  }
}, { deep: true });
</script>

<style lang="less" scoped>
.right-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid #f0f0f0;
}

.panel-title {
  margin: 0;
  padding: 16px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #f0f0f0;
}

.panel-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;

  :deep(.ant-formily-item) {
    margin-bottom: 16px;
  }

  :deep(.ant-formily-item-label) {
    font-weight: 500;
  }

  :deep(.ant-collapse) {
    border: none;
    background: transparent;
  }
}

.empty-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #999;
  font-size: 14px;
}

.color-picker-wrapper {
  position: relative;
  
  .color-preview {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    cursor: pointer;
  }

  .color-picker-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}
</style>